iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 12
0
自我挑戰組

新手村-30 Day JS Coding Challenge系列 第 12

新手村12 - Key Sequence Detection

  • 分享至 

  • xImage
  •  

12 - Key Sequence Detection

俗話說的好,一天一蘋果,醫生遠離我

一天一 JS,What the f*ck JavaScript?

small steps every day - 記錄著新手村日記

完成目標

  • 做一個打密碼出現彩蛋的功能,像是以前打遊戲的密技(WWSSAADD)
    • 呼叫以下網站的圖樣:http://www.cornify.com/js/cornify.js

index_START.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Key Detection</title>
  <script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
</head>
<body>
<script>
</script>
</body>
</html>

JS - step by step

首先,這個範例就是使用者打出 secretCode 密技的內容 上上下下左左右右 就可以召喚出圖片,因此,開始時我們應該先偵測使用者在 keyup 的時候,輸入了什麼按鍵

<script>
  window.addEventListener('keyup',function(env){
    console.log(env.key, env.keyCode)
  });
</script>

把指令的密技 keyCode 存成一個陣列,並將使用者的 input 設為一個空陣列

<script>
  const secretCode = [38, 38, 40, 40, 37, 37, 39, 39];
  const userinput = [];
  window.addEventListener('keyup',function(env){
    console.log(env.key, env.keyCode)
  });
</script>

假設使用者輸入數字時,透過 push 會將 keyCode 推進去 userinput 陣列中

Array.prototype.push():https://tinyurl.com/yycov32s

<script>
  const secretCode = [38, 38, 40, 40, 37, 37, 39, 39];
  const userinput = [];
  window.addEventListener('keyup',function(env){
    userinput.push(env.keyCode);
  });
</script>

如果使用者 input 的 KeycodesecretCode 相同的話,就會呼叫 cornify_add() 這個 JS 套件中的方法

<script>
  const secretCode = [38, 38, 40, 40, 37, 37, 39, 39];
  const userinput = [];
  window.addEventListener('keyup',function(env){
    userinput.push(env.keyCode);
    if(userinput.join('') === secretCode.join('')){
      cornify_add();
    }
  });
</script>

userinput 陣列打對一次後會一直越來越多~來判斷一下 userinput 長度太長的話,把第一個砍掉

Array.prototype.shift():https://tinyurl.com/y4bs8dmf

<script>
  const secretCode = [38, 38, 40, 40, 37, 37, 39, 39];
  const userinput = [];
  window.addEventListener('keyup',function(env){
    userinput.push(env.keyCode);

    while(userinput.length > secretCode.length){
      userinput.shift();
    }
    if(userinput.join('') === secretCode.join('')){
      cornify_add();
    }
  });
</script>

就大功告成啦!

JS - Final

<script>
  const secretCode = [38, 38, 40, 40, 37, 37, 39, 39];
  const userinput = [];
  window.addEventListener('keyup',function(env){
    userinput.push(env.keyCode);

    while(userinput.length > secretCode.length){
      userinput.shift();
    }
    if(userinput.join('|') === secretCode.join('|')){
      cornify_add();
    }
  });
</script>

本刊同步於個人網站:http://chestertang.site/

本次範例程式碼原作者來源:https://tinyurl.com/yavm5f5n


上一篇
新手村11 - Custom Video Player
下一篇
新手村13 - Slide in on Scroll
系列文
新手村-30 Day JS Coding Challenge30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言